import React, {Component} from 'react';

import {
    View,
    Text
} from 'react-native';
import PopularTab from "./PopularTab";
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view';
import NavigationBar from "../../common/NavigationBar";
import LanguageDao, {FLAG_LANGUAGE} from "../../expand/Dao/LanguageDao";

export default class PopularPage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            language: []
        }
    }

    componentDidMount() {
        this.onLoadLanguage()
    }

    onLoadLanguage() {
        let languageDao = new LanguageDao(FLAG_LANGUAGE.flag_key)
        languageDao.fetch()
            .then(result => {
                this.setState({
                    language: result
                })
            })
            .catch(error => {
                console.warn(error)
            })
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <NavigationBar title='Popular'/>
                <ScrollableTabView
                    initialPage={0}
                    tabBarBackgroundColor='#2196F3'
                    tabBarInactiveTextColor='mintcream'
                    tabBarActiveTextColor='white'
                    tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}
                    renderTabBar={() => <ScrollableTabBar activeTab={1}/>}
                >
                    {this.state.language.map((result, i, arr) => {
                        let lan = arr[i]
                        return lan.checked ? <PopularTab key={i} tabLabel={lan.name} keyword={lan.path} {...this.props}/> : null
                    })}
                </ScrollableTabView>
            </View>
        )
    }
}
